<template>
    <div>
        <van-nav-bar
            title="客服中心"
            left-arrow
            @click-left="onClickLeft"
            />
            <!-- 自动服务 -->
        <div class="customer">
            <h3>自动服务</h3>
            <!-- 功能建议 -->
            <div class="customer_1" @click="$router.push('/propose')">
                <div>
                <van-icon name="label" size="22px" color="#f03d37" />
                <p style="font-size: 12px;">功能建议</p>
                </div>
                <van-icon name="arrow" />
            </div>
            <!--信息举报  -->
            <div class="customer_2" @click="$router.push('/report')">
                <div>
                <van-icon name="label" size="22px" color="#f03d37"/>
                <p style="font-size: 12px;">信息举报</p>
                </div>
                <van-icon name="arrow" />
            </div>
        </div>
        <!-- 常见问题 -->
        <!-- 问题 -->
        <div class="common">
            <h3 style="margin-top: 45px;">常见问题</h3>
            <div class="common_1">
                <span :class="bj==true? 'common_span' : 'active'" @click="clickbj">保洁</span>
                <span :class="pt==true? 'common_span' : 'active'" @click="clickpt">平台</span>
                <span :class="jd==true? 'common_span' : 'active'" @click="clickjd">家电/家具清洗</span>
                <span :class="wx==true? 'common_span' : 'active'" @click="clickwx">维修/安装</span>
                
            </div>
        </div>
        <!-- 问题 -->
        <div class="problem">
            <div class="problem_1">
                <span>月嫂有哪些产品类型？</span>
                <van-icon name="arrow" />
            </div>
            <div class="problem_1">
                <span>如何通知月嫂上户开始服务？</span>
                <van-icon name="arrow" />
            </div>
            <div class="problem_1">
                <span>月嫂劳动者报酬如何发放？</span>
                <van-icon name="arrow" />
            </div>
            <div class="problem_1">
                <span>月嫂订单如何退费？</span>
                <van-icon name="arrow" />
            </div>
            <div class="problem_1">
                <span>合同期内会收取其他费用吗？</span>
                <van-icon name="arrow" />
            </div>
            <div class="problem_1">
                <span>月嫂不适合怎么办？</span>
                <van-icon name="arrow" />
            </div>
        </div>
        <!-- 电话客服 -->
        <div class="phone">
        <span class="phone_1">电话客服</span>

        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                wx:true,
                ys:true,
                bj:true,
                pt:true,
                jd:true,
            }
        },
        methods:{
            onClickLeft() {
            this.$router.go(-1)
            },
            
           clickwx(){
            this.wx=!this.wx
            if(this.wx == false){
                this.ys=true,
                this.bj=true,
                this.pt=true,
                this.jd=true
            }
           },
           clickys(){
            this.ys=!this.ys
            if(this.ys == false){
                this.wx=true,
                this.bj=true,
                this.pt=true,
                this.jd=true
            }
           },
           clickbj(){
            this.bj=!this.bj
            if(this.bj == false){
                this.wx=true,
                this.ys=true,
                this.pt=true,
                this.jd=true
            }
           },
           clickpt(){
            this.pt=!this.pt
            if(this.pt == false){
                this.wx=true,
                this.bj=true,
                this.ys=true,
                this.jd=true
            }
           },
           clickjd(){
            this.jd=!this.jd
            if(this.jd == false){
                this.wx=true,
                this.bj=true,
                this.ys=true,
                this.pt=true
            }
           },
           
        }
    }
</script>

<style lang="scss" scoped>
// 切换
 .active{
    border-radius: 15px;
    margin:  5px;
    padding: 10px;
    font-size: 5px;
    color:#f03d37 ;
    background-color: #f39e98;
 }

 h3{
    margin: 8px;
 }
 .customer_1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 7px;
    text-align: center;
    border: 1px solid #bbb;
    margin:20px 8px;
    border-radius: 10px;
 }
//  信息举报
.customer_2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 7px;
    text-align: center;
    border: 1px solid #bbb;
    margin:0 8px;
    border-radius: 10px;

 }
//  常见问题
.common_1{
    margin-top: 15px;
    padding: 0 8px;
}
.common_span{
    background-color: #eee;
    border-radius: 15px;
    margin:  5px;
    padding: 10px;
    font-size: 5px;
    
}
// 问题
.problem{
    margin-top: 18px;

}
.problem_1{
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.problem_1>span{
    font-size: 15px;
}
// 电话客服
.phone{
   display: flex;
   justify-content: center;
    border: 1px solid #bbb;
    padding: 10px;
    margin: 20px 8px;
    &:active{
    background-color: #fff;

    }
}

</style>